<template>
	<view class="content">
		<view class="list" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="font-size: 35rpx;">荤菜</view>
			<view style="display: flex;">
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="open">修改</button>
				<button type="warn" size="mini" @click="del">删除</button>
			</view>
		</view>

		<view class="list" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="font-size: 35rpx;">素菜</view>
			<view style="display: flex;">
				<button type="primary" size="mini" style="margin-right: 10rpx;" @click="open">修改</button>
				<button type="warn" size="mini" @click="del">删除</button>
			</view>
		</view>

		<view class="list" style="color: #007AFF; text-align: center;" @click="open">
			+添加分组
		</view>

		<uni-popup ref="popup" :mask-click="false">
			<uni-popup-dialog type="input" title="请输入分组名称" mode="input" message="成功消息" :duration="2000" :value="name"
				:before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:''
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close();
			},
			confirm(val){
				this.$refs.popup.close();
			},
			del(){
				uni.showModal({
				    title: '提示',
				    content: '确认删除此菜谱?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		padding: 30rpx;
		color: #333;
	}

	.list {
		background-color: #f8f8f8;
		padding: 30rpx;
		margin: 30rpx 0;
	}
</style>
